import React, { useState, useEffect } from 'react';
import styled, { keyframes } from 'styled-components';

// 定义淡入动画
const fadeIn = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`;

// 定义打印状态容器样式
const PrintStatusContainer = styled.div`
  text-align: center;
  font-size: 24px;
`;

// 定义状态文本样式
const StatusText = styled.span<{ isPrinting: boolean }>`
  opacity: 0;
  animation: ${fadeIn} 1s ease-in-out forwards;
  display: ${({ isPrinting }) => (isPrinting ? 'inline' : 'none')};

  &.printed {
    display: ${({ isPrinting }) => (isPrinting ? 'none' : 'inline')};
  }
`;

const PrintStatus = () => {
  const [isPrinting, setIsPrinting] = useState(true);

  useEffect(() => {
    // 模拟打印过程，3 秒后完成打印
    const timer = setTimeout(() => {
      setIsPrinting(false);
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <PrintStatusContainer>
      <StatusText isPrinting={isPrinting}>printing</StatusText>
      <StatusText isPrinting={isPrinting} className="printed">printed</StatusText>
    </PrintStatusContainer>
  );
};

export default PrintStatus;
    